@import 'scss-imports/variables';

:host {
  color: var(--fg1);
  display: block;
  font-size: 12px;
  margin-bottom: 19px;
  margin-top: 12px;

  :host-context(ix-editable) & {
    margin-bottom: 0;
    margin-top: 0;
  }

  mat-radio-group {
    display: flex;
    flex-direction: column;

    &.inline {
      flex-direction: row;
      flex-wrap: wrap;
    }

    > div {
      align-items: center;
      display: flex;
    }

    mat-radio-button {
      margin: 0 8px 0 -10px;
      width: initial;
    }
  }

  .radio-item {
    flex: 1 1 100%;

    @media(max-width: $breakpoint-md) {
      flex-basis: 100% !important;
    }
  }
}
